<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>表单验证插件</title>
	<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="from.js"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		form {
			width: 600px;
			margin: 100px auto;
			text-align: center;
		}

		label {
			width: 80px;
            text-align: left;
		}

		input {
			margin-bottom: 10px;
			border: 1px solid #e0e0e0;
			height: 30px;
			width: 200px;
			border-radius: 5px;
			text-indent: 1em;
		}

		input[type="submit"] {
			width: 205px;
			background-color: #1ABA78;
			color: #fff;
			border: none;
			cursor: pointer;
		}

		input[type="submit"]:hover {
			opacity: 0.8;
		}
		.box{
			position: relative;
		}
		.errormsg {
			position: absolute;
			top: 8px;
			left: 460px;
		}
	</style>
</head>

<body>
	<form id="mayform">
		<div class="box">
			<label>姓&#x3000;&#x3000;名：</label>
			<input type="text" name="user" check="required chinese" placeholder="请输入姓名" /></div>
		<div class="box">
			<label>密&#x3000;&#x3000;码：</label>
			<input type="password" check="required pw1" placeholder="请输入密码" /></div>
		<div class="box">
			<label>确认密码：</label>
			<input type="password" check="required pw2" placeholder="请再次输入密码" /></div>
		<div class="box">
			<label>邮&#x3000;&#x3000;箱：</label>
			<input type="text" name="email" check="required email" placeholder="请输入邮箱" /></div>
		<div class="box">
			<label>手&#x3000;&#x3000;机：</label>
			<input type="text" name="phone" check="required phone" placeholder="请输入手机号" /></div>
			<input type="submit" value="提交" />
	</form>
</body>
<script type="text/javascript">
	$(function(){
		$("#mayform").checkForm();
	})
</script>

</html>